<template>
  <div class="AddOrUpdate_main add_container column_two">
    <div class="main_main">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <el-form-item label="上级菜单" prop="parentName">
          <div class="show">{{ formData.parentName }}</div>
          <!--          <el-input v-model="formData.parentName" placeholder="请输入" />-->
        </el-form-item>
        <el-form-item label="菜单类型" prop="menuType">
          <el-radio-group v-model="formData.menuType">
            <el-radio label="M">目录</el-radio>
            <el-radio label="C">菜单</el-radio>
            <el-radio label="F">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <el-input v-model="formData.icon" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="formData.menuName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="显示顺序" prop="orderNum">
          <el-input v-model="formData.orderNum" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item v-if="formData.menuType !== 'F'" prop="path">
          <span slot="label">
            <el-tooltip content="访问的路由地址，如：`user`" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
            路由地址
          </span>
          <el-input v-model="formData.path" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item v-if="formData.menuType == 'C'" prop="component">
          <span slot="label">
            <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
            组件路径
          </span>
          <el-input v-model="formData.component" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item v-if="formData.menuType !== 'M'">
          <el-input v-model="formData.perms" placeholder="请输入" maxlength="100" clearable />
          <span slot="label">
            <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
            权限字符
          </span>
        </el-form-item>
        <el-form-item v-if="formData.menuType !== 'F'">
          <span slot="label">
            <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
            显示状态
          </span>
          <el-radio-group v-model="formData.visible">
            <el-radio label="1">显示</el-radio>
            <el-radio label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formData.menuType !== 'F'">
          <span slot="label">
            <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
            菜单状态
          </span>
          <el-radio-group v-model="formData.status">
            <el-radio label="1">正常</el-radio>
            <el-radio label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formData.menuType == 'C'">
          <span slot="label">
            <el-tooltip content="选择隐藏则路由将不会出现在移动端" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
            APP显示
          </span>
          <el-radio-group v-model="formData.appShow">
            <el-radio label="1">显示</el-radio>
            <el-radio label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { save, update, getById } from '@/api/superManage/tenantMenu'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {},
    defaultValue: {}
  },
  data() {
    return {
      formData: {
        menuId: undefined,
        parentId: undefined,
        menuName: undefined,
        icon: undefined,
        menuType: 'M',
        perms: undefined,
        component: undefined,
        orderNum: undefined,
        path: undefined,
        visible: '1',
        appShow: '0',
        status: '1'
      },
      rules: {
        menuName: [
          { required: true, message: '菜单名称不能为空', trigger: 'change' }
        ],
        orderNum: [
          { required: true, message: '显示顺序不能为空', trigger: 'change' }
        ],
        path: [
          { required: true, message: '路由地址不能为空', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    if (!this.id) { // 没有id就是新增
      Object.keys(this.defaultValue).forEach(key => { // 给右边数据赋值
        this.formData[key] = this.defaultValue[key]
      })
    } else { // 有id就是编辑
      this.getById()
    }
  },
  methods: {
    getById() {
      getById(this.id).then(res => {
        Object.keys(this.formData).forEach(key => { // 给右边数据赋值
          this.formData[key] = res.data[key]
        })
      })
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (!this.id) { // 没有id就是新增
            save(this.formData).then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.$layer.close(this.layerid) // 关闭弹框
              this.$parent.refresh() // 调用父组件的刷新方法
            })
          } else { // 有id就是编辑
            update(this.formData).then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.$layer.close(this.layerid) // 关闭弹框
              this.$parent.refresh() // 调用父组件的刷新方法
            })
          }
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>
</style>
